<template>
  <div class="ke-teacher-info">
    <div class="teacher-info">
      <div class="avatar">
        <img :src="avatar" />
      </div>
      <div class="name">{{teacherInfo.nickName}}</div>
      <div class="personalized">{{teacherInfo.personalized}}</div>
    </div>
    <div class="course-desc">
      <div class="title">课程介绍</div>
      <div class="desc">{{courseSrc.description}}</div>
    </div>
    <div class="buy-collect">
      <el-button type="primary" class="buy" @click="buyCourse">立刻报名</el-button>
      <el-button type="primary" class="collect" @click="collectCourse">立刻收藏</el-button>
    </div>
    <div class="dialog-buy">
      <el-dialog
        title="课程信息确认"
        :visible.sync="dialogVisibleToBuy"
        width="40%"
        :before-close="handleCloseToBuy"
      >
        <div class="buy">
          <div class="courseInfo">
            <div class="poster">
              <img :src="require('../../assets/images/linux.jpg')" />
            </div>
            <div class="courseName">{{courseSrc.coursename}}</div>
            <div class="courseDesc">{{courseSrc.description}}</div>
            <div class="teacherName">
              教师:
              <span>{{teacherInfo.nickName}}</span>
            </div>
            <div class="price">
              价格:
              <span>{{courseSrc.price}}</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleToBuy = false">取 消</el-button>
          <el-button type="primary" @click="handleToBuy">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="dialog-collect">
      <el-dialog
        title="课程信息确认"
        :visible.sync="dialogVisibleToCollect"
        width="40%"
        :before-close="handleCloseToCollect"
      >
        <div class="buy">
          <div class="courseInfo">
            <div class="poster">
              <img :src="require('../../assets/images/linux.jpg')" />
            </div>
            <div class="courseName">{{courseSrc.coursename}}</div>
            <div class="courseDesc">{{courseSrc.description}}</div>
            <div class="teacherName">
              教师:
              <span>{{teacherInfo.nickName}}</span>
            </div>
            <div class="price">
              价格:
              <span>{{courseSrc.price}}</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleToCollect = false">取 消</el-button>
          <el-button type="primary" @click="handleToCollect">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'keTeacherInfo',
  inject: ['reload'],
  data() {
    return {
      courseSrc: {},
      teacherInfo: {},
      dialogVisibleToBuy: false,
      dialogVisibleToCollect: false
    }
  },
  computed: {
    avatar() {
      if (this.teacherInfo.avatar !== undefined) {
        return this.teacherInfo.avatar
      } else {
        return require('../../assets/images/node.jpg')
      }
    }
  },
  mounted() {
    this.getCourseSrc()
    this.getTeacherInfo()
  },
  methods: {
    getCourseSrc() {
      if (!this.$store.state.courseSrc) {
        return '暂无课程描述'
      }
      this.courseSrc = this.$store.state.courseSrc.courseSrc
    },
    getTeacherInfo() {
      this.$axios
        .post('/api/user/userInfo', {
          teacherId: this.courseSrc.teacherId
        })
        .then(res => {
          this.teacherInfo = res.data.data
        })
    },
    buyCourse() {
      this.dialogVisibleToBuy = true
    },
    handleToBuy() {
      this.$axios
        .get('/api/user/buyCourse', {
          headers: {
            courseId: this.courseSrc.id,
            userId: localStorage.getItem('ke_id')
          }
        })
        .then(res => {
          const data = res.data.data
          if (data === null) {
            this.$message({
              message: '您已购买当前课程，不能重复购买',
              type: 'warning'
            })
            this.dialogVisibleToBuy = false
            return
          }
          this.$message({
            message: '支付成功，您已购买该课程',
            type: 'success'
          })
          this.dialogVisibleToBuy = false
          this.reload()
        })
        .catch(err => {
          throw err
        })
    },
    handleCloseToBuy(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    collectCourse() {
      // 添加到收藏夹
      this.dialogVisibleToCollect = true
    },
    handleToCollect() {
      this.$axios
        .get('/api/user/collectCourse', {
          headers: {
            courseId: this.courseSrc.id,
            userId: localStorage.getItem('ke_id')
          }
        })
        .then(res => {
          const data = res.data.data
          if (data === null) {
            this.$message({
              message: '当前课程已在收藏夹，不能重复添加',
              type: 'warning'
            })
            this.dialogVisibleToCollect = false
            return
          }
          this.$message({
            message: '添加成功，请前往课程表查看',
            type: 'success'
          })
          this.dialogVisibleToCollect = false
        })
    },
    handleCloseToCollect(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './index.styl';
</style>
